const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');

// npm i babel-cli -g   为了使用babel命令
// babel-preset-react   以react的方式来识别

// babel 要转换的文件 -o 输出的文件 -w

// 根据各个模块之间的依赖关系来进行打包 
module.exports = {
    // 入口文件
    // babel
    entry: "./index.js",
    // 出口文件
    output: {
        // 必须是绝对路径
        path: path.join(__dirname, 'dist'),
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    mode: "development",
    devServer: {
        port: 3333
    },
}